<template>
    <div class="assy">
        <img src="@/assets/images/buildHouse/bg_case.png" alt="">
        <div class="assy-inner">
            <div class="assy-item" v-for="(item,index) in data" :key="index">
                <span class="assy-item-title">{{ item.location }}<i>{{ item.num }}</i></span>
            </div>
            <!-- <div class="assy-item">
                <span class="assy-item-title">人民大会堂<i>6</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">国家会议中心<i>5</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">雁西湖中心<i>3</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">杭州亚运会<i>2</i></span>
            </div>
            <div class="assy-item">
                <span class="assy-item-title">钓鱼台国宾馆<i>1</i></span>
            </div> -->
        </div>
    </div>
</template>
<script setup>
import { getSubmitTopNum } from '@/api/buildHouse.js';

// const props = defineProps({
//     data: {
//         required: true,
//         type: Array,
//         default: [{
//         	keyLocations:"四川",
//         	placeNum:"17"
//         },{
//         	keyLocations:"贵州",
//         	placeNum:"15"
//         },{
//         	keyLocations:"广西",
//         	placeNum:"11"
//         },{
//         	keyLocations:"云南",
//         	placeNum:"9"
//         },{
//         	keyLocations:"重庆",
//         	placeNum:"5"
//         }]
//     }
// })
const data = ref([]);
getSubmitTopNum().then((res) => {
    //console.log(res.data)
   data.value = res.data;

});
</script>
<style lang='scss' scoped>
.assy{
    position: relative;
    margin: 0px 0 20px 0;
    width: 440px;
    /*height: 200px;*/
    img{
        width: 346px;
        height: 226px;
        display: block;
        margin: 70px 0 0 50px;
    }
    .assy-inner{
        width: 440px;
        height: 350px;
        position: absolute;
        top: -45px;
        left: 0;
    }
    &-item{
        width: 190px;
        height: 63px;
        // background-size: 100% 100%;
        background-image: url('@/assets/images/anbao/bg_qing.png')!important;
        background-repeat: no-repeat;
        background-position: 0 0;
        box-sizing: border-box;
        padding-left: 65px;
        line-height: 63px;
        position: absolute;
        &:nth-child(1){
            top: 110px;
            left: 0;
        }
        &:nth-child(2){
            background-image: url('@/assets/images/anbao/bg_zi.png')!important;
            bottom: 20px;
            left: 20px;
        }
        &:nth-child(3){
            background-image: url('@/assets/images/anbao/bg_cheng.png')!important;
            right: 0px;
            bottom: 40px;
            /*width: 230px;*/
        }
        &:nth-child(4){
            background-image: url('@/assets/images/anbao/bg_lan.png')!important;
            top: 60px;
            right: 0;
            width: 200px;
        }
        &:nth-child(5){
            background-image: url('@/assets/images/anbao/bg_lv.png')!important;
            top: -10px;
            left: 130px;
        }
        &-title{
            color: #fff;
            font-size: 14px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 23px;
            margin-left: -10px;
            i{
              font-size: 18px;
							font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 60px;
              margin: 0 0 0 8px;
            }
        }
    }
}
</style>